<template>
  <view class="withdrawal">
    <view class="bg-fff" style="padding: 0 20upx">
      <u-form ref="uForm" >
        <u-form-item label="收款账户" right-icon="arrow-right" label-width="140">
          <view @click="showAccount">
            <div v-if="balanc.type != 1 && balanc.type != 2" class="font-24 col-333 flex-1">请选择</div>
            <div v-if="balanc.type == 1" class="font-24 col-333 flex-1">{{balanc.bankCategory}}({{balanc.accountNo.substr(balanc.accountNo.length-4, balanc.accountNo.length)}})</div>
            <div v-if="balanc.type == 2" class="font-24 col-333 flex-1">支付宝({{balanc.accountNo.substr(balanc.accountNo.length-4, balanc.accountNo.length)}})</div>
          </view>
          <view class="wrap" slot="right">
            <navigator url="/pages/user/account" class="font-24 col-FF8B37 text-cent btn-style" style="margin-left: 20upx">账户管理</navigator>
          </view>
        </u-form-item>
        <u-form-item :label="`提现金额(满${minMoney}元即可提现)`" label-width="200" label-position="top">
          <view class="row">
            <view class="font-b font-36">￥</view>
            <view class="flex-1" style="margin-left: 10upx">
              <u-input type="digit" v-model="txMoney" placeholder="请输入提现金额"/>
            </view>
          </view>
        </u-form-item>
        <u-form-item label-width="0">
          <view class="row font-24">
            <view>总余额：￥{{currentMoney}}</view>
            <view class="color-active" style="margin-left: 10upx" @click="cashOut">全部提现</view>
          </view>
        </u-form-item>
      </u-form>
      <view class="pd_b_30 pd_t_30">
        <u-button type="primary" :custom-style="customStyle" shape="circle" @click="cashOutMoney">提现</u-button>
      </view>
    </view>
    <u-popup v-model="show" mode="bottom" border-radius="16">
      <view class="popup-container bg-fff pd_t_50 pd_b_45" style="min-height: 47upx;">
        <view class="font-28 font-b pd_b_45 text-cent">选择收款账户</view>
        <scroll-view scroll-y style="height: 500upx" v-if="accountList.length">
          <view v-for="(item, index) in accountList" @click="clickIconShow(item,index)" class="row content pd_t_30 pd_b_30 mg_l_20 mg_r_20 mg_t_20 mg_b_30">
            <view v-if="item.type == 1" class="pd_l_30 collection-icon">
              <image src="https://app.zbzedu.com/static/WaChat/img/yinlian.png" />
            </view>
            <view v-if="item.type == 2" class="pd_l_30 collection-icon">
              <image src="https://app.zbzedu.com/static/WaChat/img/zfb.png" />
            </view>
            <view class="flex-1 pd_l_20">
              <view v-if="item.type == 1" class="font-28 font-b col-333 pd_b_20">{{item.bankCategory}}</view>
              <view v-if="item.type == 2" class="font-28 font-b col-333 pd_b_20">支付宝</view>
              <view class="font-26 col-333">{{item.accountNo.substr(0, 3)}}****{{item.accountNo.substr(item.accountNo.length-4, item.accountNo.length)}}</view>
            </view>
            <u-radio-group v-model="iconShow" @change="res => clickIconShow(item,index)">
              <u-radio :name="index"></u-radio>
            </u-radio-group>
          </view>
        </scroll-view>
        <view v-if="accountList.length < 1" class="font-26 col-666 text-cent pd_t_50">暂无收款账户</view>
        <view v-if="accountList.length < 1" class="font-26 col-666 text-cent pd_b_70" style="padding-bottom: 70upx">请添加收款账户后操作</view>
        <view v-if="accountList.length < 1" class="confirm-btn text-cent col-333 font-30 font-b" @click="openWindow('html/userCenter/account_number')">
          <u-button type="primary" :custom-style="customStyle1" shape="circle" @click="jump('/pages/user/account')">添加</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import {TOAST} from "../../util/util";
  import {THEME} from "../mixins/config";

  export default {
    onLoad(option) {
      this.currentMoney = Number(option.currentMoney)
      if (option.type) {
        this.type = option.type
      }
      this.threshold()
    },
    data() {
      return {
        show: false,
        customStyle: {
          background: THEME.btn_active_bg_color,
          padding: '0 50rpx'
        },
        customStyle1: {
          background: '#ccc',
          padding: '0 50rpx',
          color: '#333'
        },
        accountList: [],

        txMoney: 0,
        minMoney: 1,
        currentMoney: 0,
        list: [],
        iconShow: '0',
        balanc: {},
        type: 1
      }
    },
    methods: {
      showAccount() {
        this.show = true
        this.getAccounts()
      },
      getAccounts: function() {
        var that_ = this;
        request({
          url: '/app/userCenter/getAccounts'
        }).then(ret => {
          that_.accountList = ret.data;
          //that_.accountList = [];
        })
      },

      cashOutMoney: function() {
        var that_ = this;
        if (that_.txMoney > that_.currentMoney) {
          TOAST("不能大于总金额");
          return false;
        }
        if (that_.txMoney < that_.minMoney) {
          TOAST("不能小于最低金额");
          return false;
        }
        if (!that_.balanc.type) {
          TOAST("请选择账号");
          return false;
        }
        if (!that_.balanc.type) {
          TOAST("请选择账号");
          return false;
        }
        request({
          url: '/app/userCenter/cashOutMoney',
          method: 'post',
          data: {
            money: that_.txMoney,
            type: that_.type,
            account: that_.balanc.accountNo,
            accountType: that_.balanc.type
          }
        }).then(ret => {
          that_.txMoney = 0;
          TOAST('提现成功');
          setTimeout(function(){
            uni.navigateBack();
          },300)
        })
      },

      threshold: function() {
        var that_ = this;
        request({
          url: '/app/userCenter/cashOut/threshold'
        }).then(ret => {
          that_.minMoney = ret.data.threshold;
        })
      },

      jump(path) {
        this.$u.route({
          url: path
        })
      },

      clickIconShow(obj,i){
        this.balanc = obj;
        this.show = false;
        this.iconShow = i;
      },

      cashOut: function() {
        this.txMoney= this.currentMoney
      }
    }
  }
</script>

<style scoped lang="scss">
  .withdrawal {
    border-top: 2upx solid #e4e7ed;
    background: #f7f7f7;
    height: 100%;
    box-sizing: border-box;
    .popup-container {
      width: 100%;
      padding-left: 5%;
      padding-right: 5%;
      .collection-icon {
        width: 70upx;
        height: 40upx;
        line-height: 0;
        margin-right: 20upx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        border-radius: 12upx;
        box-shadow: 0 8upx 16upx 0 rgba(209, 209, 209, 0.5);
      }
    }
  }
</style>
